@extends('layouts.app')
@section('title', '收货地址列表')

@section('content')
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <div class="card panel-default">
                <div class="card-header">
                    收货地址列表
                    <a href="{{ route('user_addresses.create') }}" class="float-right">新增收货地址</a>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>收货人</th>
                            <th>地址</th>
                            <th>邮编</th>
                            <th>电话</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($addresses as $address)
                            <tr>
                                <td>{{ $address->contact_name }}</td>
                                <td>{{ $address->full_address }}</td>
                                <td>{{ $address->zip }}</td>
                                <td>{{ $address->contact_phone }}</td>
                                <td>
                                    <a href="{{ route('user_addresses.edit',['user_address' => $address->id]) }}"
                                       class="btn btn-primary">修改</a>

                                    <button class="btn btn-danger btn_del_address" type="button"
                                            data-url="{{ route('user_addresses.destroy',['user_address'=>$address->id]) }}">删除
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scriptsAfterJs')
    <script>
        $(document).ready(function () {

            // 删除按钮 点击事件
            $('.btn_del_address').click(function()  {
                // 获取 data-id 属性的值 也就是ID
                let url = $(this).data('url');
                swal({
                    title: '确定要删除该地址么？',
                    icon: 'warning',
                    buttons: ['取消', '确认'],
                    dangerMode: true
                })
                // 用户点击按钮后悔触发这个回调函数
                    .then((willDelete) => {
                        // 用户点击了确定 willDelete 值为 true 否则  false
                        // 用户点击了取消， 啥也不做
                        if (!willDelete) {
                            return;
                        }
                        // 调用删除接口 ， 用 ID 来拼出请求的url
                        axios.delete(url).then(() => {
                            // 请求成功
                            location.reload();
                        })
                    })
            })
        });
    </script>
@endsection